<div class="layui-container fly-marginTop fly-user-main">

    <!-- 左菜单栏 -->
    {include file="common/menu"}

    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">

            <!-- 头菜单栏 -->
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">我的资料</li>
                <li lay-id="pass">密码</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="avatar">背景封面</li>

                <!-- <li lay-id="bind">帐号绑定</li> -->
            </ul>

            <!-- 中心内容 -->
            <div class="layui-tab-content" style="padding: 20px 0;">

                <!-- 我的资料 -->
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                    <form method="post">
                        <!-- 关键词来区分是哪一个表单的提交 -->
                        <input type="hidden" name="action" value="base" />

                        <!-- 邮箱 -->
                        <div class="layui-form-item">
                            <label for="email" class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="email" id="email" name="email" required class="layui-input"
                                    value="{$LoginUser.email}">
                            </div>

                            {if condition="!$LoginUser.auth"}
                            <div class="layui-form-mid layui-word-aux">
                                如果您在邮箱已激活的情况下，变更了邮箱，需
                                <a id="send" href="javascript:void(0)"
                                    style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>
                            </div>
                            {/if}
                        </div>

                        <!-- 昵称 -->
                        <div class="layui-form-item">
                            <label for="nickname" class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="nickname" name="nickname" required value="{$LoginUser.nickname}"
                                    class="layui-input" />
                            </div>

                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width:250px;">
                                    <input type="radio" {$LoginUser.sex==1 ? "checked" : '' } name="sex" value="1"
                                        title="男" />
                                    <input type="radio" {$LoginUser.sex==2 ? "checked" : '' } name="sex" value="2"
                                        title="女" />
                                    <input type="radio" {$LoginUser.sex==0 ? "checked" : '' } name="sex" value="0"
                                        title="保密" />
                                </div>
                            </div>
                        </div>

                        <!-- 积分 -->
                        <div class="layui-form-item">
                            <label for="point" class="layui-form-label">积分</label>
                            <div class="layui-input-inline">
                                <input type="text" id="point" name="point" value="{$LoginUser.point}" disabled
                                    class="layui-input" />
                            </div>
                        </div>

                        <!-- 城市联动 -->
                        <div class="layui-form-item">
                            <label for="point" class="layui-form-label">所在地区</label>
                            <!-- 省份 -->
                            <div class="layui-input-inline">
                                <select name="province" lay-filter="province">
                                    {foreach $province as $item}
                                    <option {$LoginUser.province==$item.code ? "selected" : "" } value="{$item.code}">
                                        {$item.name}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <!-- 城市 -->
                            <div class="layui-input-inline">
                                <select name="city" lay-filter="city">
                                    {foreach $city as $item}
                                    <option {$LoginUser.city==$item.code ? "selected" : "" } value="{$item.code}">
                                        {$item.name}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <!-- 区域 -->
                            <div class="layui-input-inline">
                                <select name="district">
                                    {foreach $district as $item}
                                    <option {$LoginUser.district==$item.code ? "selected" : "" } value="{$item.code}">
                                        {$item.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>

                        <!-- 个人资料 -->
                        <div class="layui-form-item layui-form-text">
                            <label for="content" class="layui-form-label">个人简介</label>
                            <div class="layui-input-block">
                                <textarea placeholder="这个人很懒什么都没留下" id="content" name="content" class="layui-textarea"
                                    style="height: 80px;">{$LoginUser.content}</textarea>
                            </div>
                        </div>

                        <!-- 提交 -->
                        <div class="layui-form-item">
                            <button type="submit" class="layui-btn">确认修改</button>
                        </div>
                    </form>
                </div>

                <!-- 密码 -->
                <div class="layui-form layui-form-pane layui-tab-item">
                    <form method="post">
                        <!-- 关键词来区分是哪一个表单的提交 -->
                        <input type="hidden" name="action" value="password" />
                        <!-- 当前密码 -->
                        <div class="layui-form-item">
                            <label for="nowpass" class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="nowpass" name="nowpass" required lay-verify="required"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <!-- 新密码 -->
                        <div class="layui-form-item">
                            <label for="password" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" name="password" required lay-verify="required"
                                    autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                        </div>

                        <!-- 确认密码 -->
                        <div class="layui-form-item">
                            <label for="repass" class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="repass" name="repass" required lay-verify="required"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit>确认修改</button>
                        </div>
                    </form>
                </div>

                <!-- 头像 -->
                <div class="layui-form layui-form-pane layui-tab-item">
                    <form method="post" enctype="multipart/form-data">
                        <!-- 关键词来区分是哪一个表单的提交 -->
                        <input type="hidden" name="action" value="avatar" />

                        <!-- 图片 -->
                        <div class="layui-form-item">
                            <div class="avatar-add">
                                {if condition="$Think.cookie.LoginUser['avatar']"}
                                <img id="preview" style="top:35%;cursor: pointer;"
                                    src="{$Think.cookie.LoginUser['avatar']}" onclick="file.click()" />
                                {else /}
                                <img id="preview" style="top:35%;cursor: pointer;" src="/assets/home/images/avatar.jpg"
                                    onclick="file.click()" />
                                {/if}
                                <input type="file" id="file" name="avatar" hidden />
                            </div>

                        </div>

                        <!-- 上传按钮 -->
                        <div style="width: 373px;text-align: center;">
                            <button type="submit" class="layui-btn upload-img">
                                <i class="layui-icon">&#xe67c;</i>上传头像
                            </button>
                        </div>
                    </form>
                </div>


                <!-- 背景封面 -->
                <div class="layui-form layui-form-pane layui-tab-item">

                    <form method="post" enctype="multipart/form-data">
                        <input type="hidden" name="action" value="cover">
                        <!-- 图片 -->
                        <div class="layui-form-item">
                            <div class="avatar-adds uploader-list" style="width: 100%;" id="coverimg">
                                
                                
                                    <!-- <div style="display: inline-block;width: 18%;" class="img">
                                        <img src="/assets/home/images/avatar.jpg" alt="" style="cursor: pointer;width: 100%;">
                                    </div> -->

                                    {if condition="$LoginUser.cover"}
                                        {foreach $cover as $item}
                                        <div style="display: inline-block;width: 18%;" class="img">
                                            <img src="{$item}" alt="" style="cursor: pointer;width: 100%;">
                                        </div>
                                        {/foreach}
                                    {/if}
                                
                            

                            </div>
                        </div>
                        <input type="file" id="cover" name="cover[]" multiple>
                        <!-- 提交按钮 -->
                        <div style="width: 100%;text-align: center;">
                            <button type="submit" class="layui-btn upload-img">
                                <i class="layui-icon">&#xe67c;</i>上传背景封面
                            </button>
                        </div>

                    </form>
                    <form method="post">
                        <input type="hidden" name="action" value="remove">
                        <!-- 删除按钮 -->
                        <div style="width: 100%;text-align: center; margin-top: 5px;">
                            <button class="layui-btn upload-img" id="img">
                                <i class="layui-icon">&#xe67c;</i>删除全部背景封面
                            </button>
                        </div>
                    </form>

                </div>

            </div>

        </div>
    </div>
</div>
<script>


    //前置依赖  城市联动
    layui.use(['form', 'jquery'], function () {
        var $ = layui.jquery
        var form = layui.form

        //给省份绑定change事件
        form.on('select(province)', function (data) {
            //所选择的地区码
            var code = data.value

            //发送ajax
            $.ajax({
                url: `{:url('home/user/region')}`,
                type: 'post',
                data: { code: code },
                dataType: 'json',
                success: function (success) {
                    //说明请求成功
                    if (success.code == 0) {
                        //提示框
                        layer.msg(success.msg)
                        return false
                    }

                    var str = ''

                    for (var item of success.data) {
                        str += `<option value="${item.code}">${item.name}</option>`
                    }

                    $(`select[name='city']`).html(str)

                    //用layui的方式重新渲染一下select下拉框
                    form.render('select')

                    //获取第一个城市
                    var CityCode = success.data[0] ? success.data[0].code : NULL;
                    GetCity(CityCode)

                }
            })
        })

        form.on('select(city)', function (data) {
            //所选择的地区码
            var code = data.value
            GetCity(code);
        })

        function GetCity(code = NULL) {
            //发送ajax
            $.ajax({
                url: `{:url('home/user/region')}`,
                type: 'post',
                data: { code: code },
                dataType: 'json',
                success: function (success) {
                    //说明请求成功
                    if (success.code == 0) {
                        //提示框
                        layer.msg(success.msg)
                        return false
                    }

                    var str = ''

                    for (var item of success.data) {
                        str += `<option value="${item.code}">${item.name}</option>`
                    }

                    $(`select[name='district']`).html(str)

                    //用layui的方式重新渲染一下select下拉框
                    form.render('select')
                }
            })
        }

        //头像图片预览
        $("#file").change(function () {
            console.log(this)
            //得到input选择的一个文件列表中第一个文件是一个对象
            var file = this.files[0] ? this.files[0] : {}
            console.log(file)
            var src = GetObjectURL(file)
            console.log(src)
            $("#preview").attr("src", src)
        })

        var j = $('#coverimg').html()
        console.log(j)

        //封面图片预览
        $("#cover").change(function () {
            console.log(this)

            var files = this.files
            console.log(files)

            // 图片个数
            var length = files.length;
            console.log("选择了" + length + "张图片");

            var str = "";

            for (var i = 0; i < length; i++) {
                var file = this.files[i] ? this.files[i] : {}
                var src = GetObjectURL(file)
                console.log(src)
                str += `<img src="${src}" cursor: pointer; />`
                console.log(str)
            }

            $("#coverimg").html(str + j);

        })

        // 删除图片
        $("#img").on("click", function (event) {
            $(".img").parent().remove();
        });


         if($(".img img").src =""){
             $(".img img") .attr("src","/assets/home/images/avatar.jpg");
         }



        function GetObjectURL(file) {
            // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
            var url = null;

            //判断是否为IE浏览器还是google还是其他浏览器
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }

            return url
        }

        //邮件发送
        $("#send").click(function () {
            var email = $("#email").val().trim()
            //确认对话框
            layer.confirm(`是否发送认证邮件到：${email}`, { icon: 3, title: '提示' }, function (index) {
                //关闭弹框
                layer.close(index)

                //发送异步的ajax请求
                $.ajax({
                    url: `{:url('home/user/send')}`,
                    type: 'post',
                    dataType: 'json',
                    success: function (success) {
                        layer.msg(success.msg)
                    }
                })
            })
        })
    })



</script>